<template>
  <div>
    <div class="banner">
        <img src="@/assets/images/index/banner.jpg" alt="" srcset="">
    </div>

    <div class="main">
        <div class="container">
            <ul class="main-list default-list">
                <li class="main-list-item">
                    <img class="main-list-item__img" src="@/assets/images/index/maozi.png" alt="" srcset="">
                    <h3 class="main-list-item__title">IT高端培训</h3>
                    <span class="main-list-item__c">Java大数据课程</span>
                    <span class="main-list-item__c">前端全栈式企业级课程</span>
                    <span class="main-list-item__c">UI全链路课程</span>
                </li>
                <li class="main-list-item">
                    <img class="main-list-item__img" src="@/assets/images/index/baxin.png" alt="" srcset="">
                    <h3 class="main-list-item__title">高校IT实训</h3>
                    <span class="main-list-item__c">高校IT认知实训</span>
                    <span class="main-list-item__c">高校IT实战实训</span>
                    <span class="main-list-item__c">高校讲师职业技能实训</span>             
                </li>
                <li class="main-list-item">
                    <img class="main-list-item__img" src="@/assets/images/index/dengpao.png" alt="" srcset="">
                    <h3 class="main-list-item__title">IT项目研发</h3>
                    <span class="main-list-item__c">多媒体交互软件开发</span>
                    <span class="main-list-item__c">企业级APP应用开发</span>
                    <span class="main-list-item__c">微信小程序开发</span>
                </li>
                <li class="main-list-item">
                    <img class="main-list-item__img" src="@/assets/images/index/shu.png" alt="" srcset="">
                    <h3 class="main-list-item__title">企业内训</h3>
                    <span class="main-list-item__c">新员工技术进阶</span>
                    <span class="main-list-item__c">企业项目承接</span>
                </li>
            </ul>
            <!-- 优势 -->
            <div class="our-advantages">
                <div class="main-title">
                    <h2>我们的优势</h2>
                    <small>Our Advantages</small>
                </div>
                <ul class="main-list our-adv-list">
                    <li class="main-list-item" style="background: #FF5A5A">
                        <img class="main-list-item__img" src="@/assets/images/index/jinpai.png" alt="" srcset="">
                        <h3 class="main-list-item__title">金牌课程</h3>
                        <span class="main-list-item__c">依托三百多家IT名企合作资源，始终保持技术体系的先进性和实用性，引入企业外包带薪项目，与企业无缝衔接。</span>
                    </li>
                    <li class="main-list-item" style="background: #AA72FF">
                        <img class="main-list-item__img" src="@/assets/images/index/Title_mingshifengcai.png" alt="" srcset="">
                        <h3 class="main-list-item__title">专家名师</h3>
                        <span class="main-list-item__c">坚持聘请一线精英执教，企业真实项目进课堂。把抽象的原理转换为形象的比喻。保证每个学员融会贯通，举一反三。</span>
                    </li>
                    <li class="main-list-item" style="background: #03D67F">
                        <img class="main-list-item__img" src="@/assets/images/index/hezuo1-copy.png" alt="" srcset="">
                        <h3 class="main-list-item__title">名企合作</h3>
                        <span class="main-list-item__c">与数十家IT企业签署定制式人才培养协议，学员进入企业顶岗实习，带薪做项目，每年数十场迅科学员专场招聘会。</span>
                    </li>
                    <li class="main-list-item" style="background: #47C5FF">
                        <img class="main-list-item__img" src="@/assets/images/index/jiuyepeixun.png" alt="" srcset="">
                        <h3 class="main-list-item__title">高薪就业</h3>
                        <span class="main-list-item__c">聘请资深人资经理出任职业发展顾问，为学员提供一年期，三年期，五年期职场发展服务，保障学员成为IT精英。</span>
                    </li>
                </ul>
            </div>
            <!-- 专家资源 -->
            <div class="expert-teachers">
                <div class="main-title">
                    <h2>我们的优势</h2>
                    <small>Our Advantages</small>
                </div>
                <ul class="main-list et-list">
                    <li class="main-list-item" style="">
                        <img class="main-list-item__img" src="@/assets/images/index/wu.png" alt="" srcset="">
                        <h3 class="main-list-item__title">吴工程师</h3>
                        <span class="main-list-item__c">历任多家上市企业技术骨干，现创业公司技术总监。拥有八年大前端开发经验，擅长前端架构，Hybird app设计，Html5游戏设计。</span>
                    </li>
                    <li class="main-list-item" style="">
                        <img class="main-list-item__img" src="@/assets/images/index/weng.png" alt="" srcset="">
                        <h3 class="main-list-item__title">翁工程师</h3>
                        <span class="main-list-item__c">资深软件架构师、软件外包公司高级合伙人（14年行业从业经历，10年授课经历）；历任福建东南网络公司研发部高级项目经理；福建省广播……</span>
                    </li>
                    <li class="main-list-item" style="">
                        <img class="main-list-item__img" src="@/assets/images/index/chen.png" alt="" srcset="">
                        <h3 class="main-list-item__title">陈设计师</h3>
                        <span class="main-list-item__c">大陆资深UI设计师，曾任职网龙、星网锐捷等各大IT公司设计部，教学风格认真细腻，体贴耐心。擅长各风格UI设计和HTML5动画设计……</span>
                    </li>
                    <li class="main-list-item" style="">
                        <img class="main-list-item__img" src="@/assets/images/index/pan.png" alt="" srcset="">
                        <h3 class="main-list-item__title">人力资源总监</h3>
                        <span class="main-list-item__c">资深职业规划师，拥有10年以上职业规划经验；近千家合作企业资源，福建众多人才基地优秀合作伙伴，成功为近万名大学生搭建名企……</span>
                    </li>
                </ul>
            </div>
            <!-- 合作院校 -->
            <div class="cooperative-colleges">
                <div class="main-title">
                    <h2>合作院校</h2>
                    <small>Cooperative Colleges</small>
                </div>
                <div class="coop-intro">
                        迅科与福州大学，福建工程学院、闽江学院、福建江夏学院、福州理工学院、阳光学院等多所
                        高校共建实习实训基地，为各大高校提供人才实习实训服务。同时公司与阳光学院等
                        高校共建专业实验室，引入企业真实项目，为高校学科建设提供技术支持。
                        成为了各大高校最可靠的合作伙伴与人才培育基地。
                </div>
                <div class="coop-img-list">
                    <img src="@/assets/images/index/b16.png" alt="" srcset="">
                    <img src="@/assets/images/index/b17.png" alt="" srcset="">
                    <img src="@/assets/images/index/b18.png" alt="" srcset="">
                    <img src="@/assets/images/index/b20.png" alt="" srcset="">
                    <img src="@/assets/images/index/b21.png" alt="" srcset="">
                    <img src="@/assets/images/index/9B160B7C3973B553F6F28268E772E1AC.png" alt="" srcset="">
                    <img src="@/assets/images/index/b27.png" alt="" srcset="">
                    <img src="@/assets/images/index/b28.png" alt="" srcset="">
                    <img src="@/assets/images/index/b30.png" alt="" srcset="">
                </div>
            </div>
            <!-- 相关权威 认证证书 -->
            <div class="auth-cert">
                <div class="auth__bg"></div>
                <div class="main-title">
                    <h2>相关权威 认证证书</h2>
                    <small>Relevant Authoritative Certificates</small>
                </div>
                <div class="auth-cert__intro">
                    迅科引进福州物联网实验室 （思凯迈）Skymind CDLE认证证书,华为权威认证证书;
                    并是全球SSE(Silicon Stone Education)职业技能认证福建地区唯一合作商。
                </div>
                <div class="flex__row">
                    <img src="@/assets/images/index/huaweiquanwei.png" alt="">
                    <img src="@/assets/images/index/huaweirenzheng.png" alt="">
                </div>
                <img src="@/assets/images/index/skycdle.png" style="width: 100%;display: block;margin-bottom: 70px;" alt="" srcset="">
                <img src="@/assets/images/index/sse.png" style="width: 100%;display: block;margin-bottom: 70px;" alt="" srcset="">
            </div>
            <!-- 我们的服务 -->
            <div class="our-services">
                <div class="main-title">
                    <h2>我们的服务</h2>
                    <small>Our services</small>
                </div>
                <div class="our-server-intro">
                    迅科教育所开设的每一门课程都基于企业定制式人才需求培养。
                        保证每个学员的高薪就业，年薪5万起。
                </div>
                <ul class="main-list our-server-list">
                    <li class="main-list-item">
                        <img class="main-list-item__img" src="@/assets/images/index/f4.png" alt="" srcset="">
                        <h3 class="main-list-item__title">外包项目实战</h3>
                        <span class="main-list-item__c">迅科教育依托优秀的企业合作资源，每个阶段均为学员提供企业外包带薪项目实训，为进入企业做好无缝衔接。</span>
                    </li>
                    <li class="main-list-item">
                        <img class="main-list-item__img" src="@/assets/images/index/f5.png" alt="" srcset="">
                        <h3 class="main-list-item__title">企业精英工程师手把手教学</h3>
                        <span class="main-list-item__c">所有企业工程师均有七年以上一线工作，两年新员工培养经验。对项目和新人培养有独到见解，善于将抽象原理转换为形象比喻。让学员融汇贯通。</span>
                    </li>
                    <li class="main-list-item">
                        <img class="main-list-item__img" src="@/assets/images/index/f7.png" alt="" srcset="">
                        <h3 class="main-list-item__title">VIP学习服务</h3>
                        <span class="main-list-item__c">学习顾问课上全程陪同学员学习，全程辅导，答疑解难。并不定期与学员恳谈、沟通，为学员排解各类学习，生活方面问题。</span>
                    </li>
                    <li class="main-list-item">
                        <img class="main-list-item__img" src="@/assets/images/index/f3.png" alt="" srcset="">
                        <h3 class="main-list-item__title">职场发展跟踪服务</h3>
                        <span class="main-list-item__c">特聘上市企业人资经理，为学员提供一年期，三年期，五年期职业生涯规划和发展服务。让学员一次学习，终生受益。</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 合作企业 -->
    <div class="cooperate-comp">
        <h2>合作企业</h2>
        <div class="container">
            <img src="@/assets/images/index/cop-ruijie.png" alt="" srcset="">
            <img src="@/assets/images/index/cop-dingdian.png" alt="" srcset="">
            <img src="@/assets/images/index/cop(1).png" alt="" srcset="">
            <img src="@/assets/images/index/cop.png" alt="" srcset="">
            <img src="@/assets/images/index/cop2.png" alt="" srcset="">
            <img src="@/assets/images/index/cop3.png" alt="" srcset="">
            <img src="@/assets/images/index/cop4.png" alt="" srcset="">
            <img src="@/assets/images/index/cop7.png" alt="" srcset="">

            <img src="@/assets/images/index/cop-huawei.png" alt="" srcset="">
            <img src="@/assets/images/index/cop-kairui.png" alt="" srcset="">
            <img src="@/assets/images/index/cop-liandi.png" alt="" srcset="">
            <img src="@/assets/images/index/cop-rongji.png" alt="" srcset="">
            <img src="@/assets/images/index/cop-ruixin.png" alt="" srcset="">
            <img src="@/assets/images/index/cop-sichuang.png" alt="" srcset="">
            <img src="@/assets/images/index/cop-xinyi.png" alt="" srcset="">
            <img src="@/assets/images/index/cop-yanhuang.png" alt="" srcset="">

            <img src="@/assets/images/index/cop-yea.png" alt="" srcset="">
            <img src="@/assets/images/index/cop-yirong.png" alt="" srcset="">
            <!-- <img src="@/assets/images/index/cop-dingdian.png" alt="" srcset="">
            <img src="@/assets/images/index/cop-dingdian.png" alt="" srcset="">
            <img src="@/assets/images/index/cop-dingdian.png" alt="" srcset="">
            <img src="@/assets/images/index/cop-dingdian.png" alt="" srcset="">
            <img src="@/assets/images/index/cop-dingdian.png" alt="" srcset="">
            <img src="@/assets/images/index/cop-dingdian.png" alt="" srcset=""> -->
        </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
img{
max-width: 100%;
}
.flex__row{
    display: flex;
    justify-content: space-between;
}
.main{
    padding: 58px 0 136px;
}
.main-title{
    font-family:MicrosoftYaHei;
    text-align: center;
    margin-bottom: 66px;
}
.main-title h2{
    font-size:40px;
    font-weight:400;
    color:rgba(102,102,102,1);
    font-weight: normal;
    margin-bottom: 19px;
}
.main-title small{
    font-size:20px;
    font-weight:400;
    color:rgba(0,144,255,1);
}

.main-list{
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
}
.main-list-item{
    width:240px;
    height:293px;
    background:rgba(255,255,255,1);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.main-list-item__img{
}
.main-list-item__title{
    font-size: 24px;
    font-weight: normal;
    margin-bottom: 28px;
}
.main-list-item__c{
    width: 100%;
    padding: 0 15px 0 35px;
    box-sizing: border-box;
}
.main-list-item__c::before{
}
/* 默认列表 */
.default-list{
    margin-bottom: 140px;
}
.default-list .main-list-item__title{
    margin-top: 120px;
}
.default-list .main-list-item{
    border:2px solid rgba(218,218,218,1);
    border-radius:8px;
}
.default-list .main-list-item__img{
    position: absolute;
    left: 50%;
    top: 60px;
    transform: translate(-50%, -50%);
}
.default-list .main-list-item__c{
    line-height: 30px;
}
.default-list .main-list-item__c::before{
    content: '-';
    margin-right: 12px;
}

/* 我们的优势 */
.our-advantages{
    margin-bottom: 129px;
}
.our-adv-list{
    color: #fff;
}
.our-adv-list .main-list-item{
    width: 260px;
    height: 380px;
    color: #fff;
}
.our-adv-list .main-list-item__img{
    margin-top: 33px;
}
.our-adv-list .main-list-item{
    border-radius: 27px;
}
.our-adv-list .main-list-item__title{
    font-weight: 26px;
    margin-top: 33px;
}
.our-adv-list .main-list-item__c{
    font-size: 16px;
    padding: 0 37px 0 37px;
}
/* 专家资源 */
.expert-teachers{
    height:423px;
    background: #0090FF;
    padding: 40px;
    box-sizing: border-box;
    margin-bottom: 300px;
}
.expert-teachers .main-title h2{
    color: #fff;
    margin-bottom: 12px;
}
.expert-teachers .main-title small{
    color: #ffF;
}
.et-list .main-list-item{
    border-radius: 0;
    color: #666666;
    width:262px;
    height:418px;
    background:rgba(255,255,255,1);
    border:2px solid rgba(232,232,232,1);
    border-radius:2px;
}
.et-list .main-list-item__img{
    margin-top: 24px;
    margin-bottom: 20px;
}
.et-list .main-list-item__c{
    padding: 0 35px 0;
}
/* 合作院校 */
.cooperative-colleges .main-title{
    margin-bottom: 32px;
}
.coop-intro{
    width: 650px;
    margin: auto;
    text-align: center;
    color:rgba(153,153,153,1);
    line-height: 28px;
    margin-bottom: 57px;
}
.coop-img-list img{
    width: 394px;
    height: 269px;
}
/* 认证证书 */
.auth-cert{
    position: relative;
}
.auth__bg{
    width: 100%;
    height:498px;
    background: #FC2351;
    position: absolute;
    z-index: -1;
}
.auth-cert .main-title{
    margin-bottom: 32px;
}
.auth-cert .main-title h2,.auth-cert .main-title small{
    color: #fff;
}
.auth-cert__intro{
    width: 580px;
    margin: auto;
    color: #fff;
    text-align: center;
}
.auth-cert .flex__row{
    margin: 63px 35px 32px 140px;
}
/* 我们的服务 */
.our-services .main-title{
    margin-bottom: 40px;
}
.our-services .main-title h2{
    margin-bottom: 10px;
}
.our-server-intro{
    color:rgba(153,153,153,1);
    text-align: center;
    margin-bottom: 60px;
}
.our-server-list .main-list-item{
    width: 280px;
}
.our-server-list .main-list-item__img{
    margin-bottom: 18px;
}
.our-server-list .main-list-item__title{
    color: #33A6FF;
    font-size: 20px;
    margin-bottom: 20px;
}
.our-server-list .main-list-item__c{
    padding: 0 18px;
    font-size: 14px;
    color:rgba(77,77,77,1);
    text-align: center;
}
/* 合作企业 */
.cooperate-comp{
    background: #0090ff;
    padding: 40px 0;
}
.cooperate-comp h2{
    font-weight: normal;
    text-align: center;
    color: #fff;
    font-size: 28px;
    margin-bottom: 70px;
    position: relative
}
.cooperate-comp h2::after{
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translate(-50%, 0);
    content: '';
    display: block;
    width:600px;
    height:2px;
    background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.99) 51%,rgba(255,255,255,-0.1) 100%);
    opacity:0.68;
}
.cooperate-comp .container::after{
    content: '';
    display: block;
    clear: both;
}
.cooperate-comp .container img{
    float: left;
    width: 180px;
    height: 54px;
    margin-right: 66px;
    margin-bottom: 30px;
}
.cooperate-comp .container img:nth-child(5n){
    margin: 0;
}

@media screen and (max-width: 480px) {
  .main{
      padding-bottom: 20px;
  }
  .main-title{
    margin-bottom: 20px;
  }
  /* 默认列表 */
  .main-list{
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .default-list{
    margin-bottom: 25px;
  }
  .main-list-item__title{
    font-size: 20px;
    margin-bottom: 15px;
  }
  .default-list .main-list-item__title{
    margin-top: 120px;
  }
  .default-list .main-list-item__c{
    line-height: 22px;
    font-size: 14px;
    padding: 0 0 0 10px;
  }
  .default-list .main-list-item{
    width: 40%;
    height: auto;
    margin-bottom: 15px;
    padding-bottom: 10px;
  }

  /* 我们的优势 */
  .our-adv-list .main-list-item{
      height: auto;
      padding-bottom: 35px;
      margin-bottom: 20px;
  }
  /*  */
  .expert-teachers{
      height: auto;
      margin-bottom: 20px;
  }
  .et-list .main-list-item{
      margin-bottom: 20px;
  }
  /* 合作院校 */
  .cooperative-colleges{
      margin-bottom: 20px;
  }
  .cooperative-colleges .coop-intro{
      width: 100%;
      padding: 0 15px;
  }
  .coop-img-list{
      font-size: 0;
  }
  .coop-img-list img{
      width: 100%;
      height: auto;
  }
    /*  */
  .auth-cert__intro{
      width: auto;
      padding: 0 15px;
  }
  .auth-cert .flex__row{
      margin: 0;
      flex-wrap: wrap;
  }
  /* 我们的服务 */
  .our-server-intro{
      /* width:  */
      padding: 15px;
      margin-bottom: 20px;
  }
  .our-server-list .main-list-item{
      width: 42%;
      height: auto;
      margin-bottom: 20px;
  }
  .our-server-list .main-list-item__title,
  .our-server-list .main-list-item__c{
      font-size: 12px;
  }

  /* 合作企业 */
  .cooperate-comp .container{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
  }
  .cooperate-comp .container img{
      width: 40%;
      margin: 0;
      margin-bottom: 15px;
  }
  .cooperate-comp h2::after{
      width: 100%;
  }
}
</style>
